<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="renderer" content="webkit" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="description" content="Metro, a sleek, intuitive, and powerful framework for faster and easier web development for Windows Metro Style.">
    <meta name="keywords" content="HTML, CSS, JS, JavaScript, framework, metro, front-end, frontend, web development">
    <meta name="author" content="Sergey Pimenov and Metro UI CSS contributors">
    <title>Bookloft</title>
    {# <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />#}
    <link rel="stylesheet" href="//cdn.bootcss.com/metro/3.0.18/css/metro.min.css" />
    <link rel="stylesheet" href="//cdn.bootcss.com/metro/3.0.18/css/metro-icons.min.css" />
    <link rel="stylesheet" href="//cdn.bootcss.com/metro/3.0.18/css/metro-responsive.min.css" />
    {% load static %}
    <link href="{% static '128x128.svg' %}" rel="icon" sizes="128x128" />
    <link rel="stylesheet" href="{% static 'base.css' %}" />
  </head>
  <body class="bg-steel">
      <div class="app-bar fixed-top darcula" data-role="appbar">
          <a class="app-bar-element branding" href="{% url 'home' %}">Bookloft</a>
          <span class="app-bar-divider"></span>
          <ul class="app-bar-menu">
              <li><a href="{% url 'home' %}">主页</a></li>
              <!--
              <li>
                  <a href="" class="dropdown-toggle">Twitter</a>
                  <ul class="d-menu" data-role="dropdown">
                      <li><a href="">New project</a></li>
                      <li class="divider"></li>
                      <li>
                          <a href="" class="dropdown-toggle">Reopen</a>
                          <ul class="d-menu" data-role="dropdown">
                              <li><a href="">Project 1</a></li>
                              <li><a href="">Project 2</a></li>
                              <li><a href="">Project 3</a></li>
                              <li class="divider"></li>
                              <li><a href="">Clear list</a></li>
                          </ul>
                      </li>
                  </ul>
              </li> -->
              <li><a href="{% url 'twitter:home' %}">微博</a></li>
              <li><a href="{% url 'wiki:home' %}">Wiki</a></li>
              <li><a href="{% url 'book:home' %}">电子书</a></li>
            </ul>
          {% if not user.is_authenticated %}
            <ul class="app-bar-menu place-right">
            <li ><a href="{% url 'account:login' %}">登录</a></li>
            </ul>
          {% else %}
          <div class="app-bar-element place-right">
              <span class="dropdown-toggle"><span class="mif-cog"></span> {{user.username}}</span>
              <div class="app-bar-drop-container padding10 place-right no-margin-top block-shadow fg-dark" data-role="dropdown" data-no-close="true" style="width: 220px">
                  <h2 class="text-light">Quick settings</h2>
                  <ul class="unstyled-list fg-dark">
                      <li><a href="" class="fg-white1 fg-hover-yellow">Profile</a></li>
                      <li><a href="" class="fg-white2 fg-hover-yellow">Security</a></li>
                      <li><a href="{% url 'account:logout' %}" class="fg-white3 fg-hover-yellow">退出</a></li>
                  </ul>
              </div>
          </div>
            {% endif %}
      </div>

      <div class="page-content">
        {% block body %}
        {% endblock %}
      </div>
      <script type="text/javascript" src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
      <script type="text/javascript" src="//cdn.bootcss.com/datatables/1.10.13/js/jquery.dataTables.min.js"></script>
      <script type="text/javascript" src="//cdn.bootcss.com/metro/3.0.17/js/metro.min.js"></script>
      <script type="text/javascript" src="{% static 'base.js' %}"></script>
      <script type="text/javascript">
      {% for message in messages %}
      $.Notify({
          //caption: '提示',
          content: '{{message}}',
          type: 'success'
      });
      {% endfor %}

      </script>
      {% block bottom %}
      {% endblock %}
  </body>
  </html>
